<template>
  <div class="dialog">
    <el-dialog
      :title="'设备台账'+titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-form-item label="所属设备型号：" prop="equModelCode" class="w100p">
          <el-select v-model="formData.equModelCode" filterable clearable>
            <el-option
              v-for="item in equModelArr"
              :key="item.equModelCode"
              :label="item.modelName"
              :value="item.equModelCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称：" prop="equipmentName" class="w100p">
          <el-input v-model="formData.equipmentName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="是否展示工况数据：" prop="operationMode" class="w100p">
          <el-select v-model="formData.operationMode" filterable clearable>
            <el-option
              v-for="item in yesOrNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否可自动驾驶：" prop="selfDriving" class="w100p">
          <el-select v-model="formData.selfDriving" filterable clearable>
            <el-option
              v-for="item in yesOrNoList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import equipStandingBookApi from "@/api/processing-management/equip-manage/equip-standing-book";

export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    },
    equModelArr: {
      type: [Array],
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      // 展示
      formData: {},
      rules: {
        equModelCode: [
          {
            required: true,
            message: "请选择设备型号",
            trigger: ["change", "blur"]
          }
        ],
        equipmentName: [
          {
            required: true,
            message: "请输入设备名称",
            trigger: ["change", "blur"]
          }
        ],
        operationMode: [
          {
            required: true,
            message: "请选择是否展示工况数据",
            trigger: ["change", "blur"]
          }
        ],
        selfDriving: [
          {
            required: true,
            message: "请选择是否可自动驾驶",
            trigger: ["change", "blur"]
          }
        ]
      },
      yesOrNoList: [
        { name: "是", id: true },
        { name: "否", id: false }
      ],
      showDialog: this.show,
      statusArr: [
        {
          name: "启用",
          id: "ENABLE"
        },
        {
          name: "废弃",
          id: "DISCARD"
        },
        {
          name: "维修中",
          id: "REPAIRING"
        },
        {
          name: "禁用",
          id: "DISABLE"
        }
      ]
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (v === "add") {
        this.formData = {};
      }
      if (v === "edit") {
        this.formData = this.editObject;
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    save(formData) {
      this.$refs[formData].validate(async valid => {
        if (valid) {
          if (this.nowChanceStau === "edit") {
            // 编辑接口
            var index = this.statusArr.findIndex(
              a => a.name === this.formData.status
            );
            if (index !== -1) {
              this.formData.status = this.statusArr[index].id;
            }
            // const { data: res } = await equipStandingBookApi.queryBeOccupied(this.formData.equipmentName);
            // if (res === false) {
            equipStandingBookApi.edit(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success("修改成功！");
                this.close();
              }
            });
            // } else {
            //   this.$message.error("该设备名称已存在，请重新输入！")
            // }
          } else if (this.nowChanceStau === "add") {
            // 新增接口
            const { data: res } = await equipStandingBookApi.queryBeOccupied(
              this.formData.equipmentName
            );
            if (res === false) {
              equipStandingBookApi.add(this.formData).then(res => {
                if (res.code === 1) {
                  this.$message.success(res.msg);
                  this.close();
                }
              });
            } else {
              this.$message.error("该设备名称已存在，请重新输入！");
            }
          }
        } else {
          return false;
        }
      });
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-form
  .el-form-item
  .el-form-item__label {
  min-width: 160px !important;
}
</style>
